* {
    margin: 0;
    padding: 0;
}

:root {
    --animation-delay: 0.15s;
}

body {
    background: #0079d7;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

    .content {
        .rotate {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            margin-bottom: 15px;
            position: relative;

            .item {
                width: 100%;
                height: 100%;
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: flex-end;
                animation: zhuan 4s linear infinite;

                &:nth-child(1) {
                    animation-delay: calc(var(--animation-delay) * var(--i));
                }

                &:nth-child(2) {
                    animation-delay: calc(var(--animation-delay) * 2);
                }

                &:nth-child(3) {
                    animation-delay: calc(var(--animation-delay) * 3);
                }

                &:nth-child(4) {
                    animation-delay: calc(var(--animation-delay) * 4);
                }

                &:nth-child(5) {
                    animation-delay: calc(var(--animation-delay) * 5);
                }

                &:after {
                    content: '';
                    display: block;
                    width: 5px;
                    height: 5px;
                    background: white;
                    border-radius: 50%;
                }
            }
        }
    }
}

@keyframes zhuan {
    75% {
        transform: rotate(600deg);
        opacity: 1;
    }

    79% {
        transform: rotate(720deg);
        opacity: 1;
    }

    80% {
        transform: rotate(720deg);
        opacity: 0;
    }

    100% {
        transform: rotate(810deg);
        opacity: 0;
    }
}